<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>抽奖圆盘</title>
    <style>
        #canvas {
            background-color: #F9ECDF;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
        }

        #container {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
        }

        #start {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
            cursor: pointer;
        }
    </style>
    <script class="jquery library" src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
</head>

<body>
    <div id="container">
        <canvas id="canvas" width="300" height="300"></canvas>
        <img id="start" src="images/disc-rotate.gif" width="100" height="100">
    </div>
</body>
<script>
    /* //JS代码 */
    $(document).ready(function() {
                var canvas=document.getElementById("canvas");
                var context=canvas.getContext("2d");
                var num=8; //奖项个数
                var rotateAngle=360/num; //每个奖项旋转的角度

                for(var i=0; i < num; i++) {
                    context.beginPath();
                    context.moveTo(150, 150);
                    context.arc(150, 150, 100, i*rotateAngle*(Math.PI/180), (i+1)*rotateAngle*(Math.PI/180));
                    // context.fillStyle="#ffc843";
                    // context.fill();
                    context.fillText(i,50*i,50);
                    context.strokeStyle="#ffffff";
                    context.stroke();
                    context.closePath();
                }

                $("#start").click(function() {
                        var randomNum=Math.floor(Math.random()*num+1); //随机奖项
                        var angle=randomNum * rotateAngle; //中奖奖项旋转的角度

                        $("#canvas").rotate({
                            angle:0,
                            animateTo:angle+1440, //多旋转几圈的动画效果

                            easing: $.easing.easeInOutExpo,
                            duration:5000,
                            callback:function() {
                                alert("恭喜您获得了" +randomNum+"等奖！");
                            }
                        });
                });
        })
</script>
</html>